<template>
	<view class="container">
		<view class="con">
			<view class="card-con">
				<view :class="['merCard',(index+1)%2==1?'card-margin':'']" v-for="(item,index) in merTypeList">
					<navigator  :url="'add-basic?type='+item.type" class="card-nav">
						<u-icon :name="item.icon" :size="56" color="#f29100"></u-icon>
						<view class="card-text">{{item.name}}</view>
					</navigator>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				merTypeList:[
					{name:"企业商户",value:1,icon:'info-circle-fill',type:1},
					{name:"事业单位商户",value:2,icon:'grid-fill',type:2},
					{name:"个体工商户",value:3,icon:'account-fill',type:3},
					{name:"个人商户",value:4,icon:'man-add-fill',type:4},
					{name:"自然人",value:5,icon:'plus-circle-fill',type:5},
					{name:"其他组织",value:6,icon:'more-circle-fill',type:6}
				]
			}
		}
	}
</script>

<style lang="scss" scoped>
	.con {
		width: 70%;
		height: auto;
		margin: 2rem auto 0 auto;
		.card-con {
			display: flex;
			flex-wrap:wrap;
			.merCard {
				width: 48%;
				height: 4.5rem;
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: .8rem;
				margin-top: .8rem;
				box-shadow:2px 2px 10px #eee;
				// text-align: center;
				.card-nav{
					text-align: center;
				}
				.card-text {
					margin-top: 10rpx;
				}
			}
			.card-margin{
				margin-right: 4%;
			}
		}

	}
</style>
